<template>
	<div id="feedback">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>意见反馈</p>
		</div>
		<ul class="feedback_type">
			<li @click="type = 1" :class="type == 1?'type_active':''">意见反馈</li>
			<li @click="type = 2" :class="type == 2?'type_active':''">反馈列表</li>
		</ul>
		<div v-if="type == 1" class="feedback_form">
			<p class="form_title">反馈类型：</p>
			<ul>
				<li @click="feedbackType = 1" :class="feedbackType == 1?'type_active':''">
					<p>意见反馈</p>
					<img v-show="feedbackType == 1" src="../../static/img/feedback-01.png"/>
				</li>
				<li @click="feedbackType = 2" :class="feedbackType == 2?'type_active':''">
					<p>功能建议</p>
					<img v-show="feedbackType == 2" src="../../static/img/feedback-01.png"/>
				</li>
			</ul>
			<p class="form_title">反馈内容：</p>
			<textarea placeholder="请输入您的问题(250字以内)" maxlength="250" v-model="feedback"></textarea>
			<input id="sub" @click="advice" type="button" value="提交" />
		</div>
		<div v-else-if="type == 2" class="feedback_list">
			<div v-for="item in list" @click="detail = true, selectDetail(item)" class="feedback_item">
				<div class="item_title">
					<p v-if="item.type == 1">意见反馈</p>
					<p v-if="item.type == 2">功能建议</p>
					<p v-if="item.status == 0">未回复</p>
					<p v-if="item.status == 1">已回复</p>
				</div>
				<div class="item_content">
					{{item.content}}	
				</div>
				<div class="item_time">
					{{getDate(item.createtime)}}
				</div>
			</div>
		</div>
		<!---------反馈详情弹窗------------>
		<div v-show="detail" id="feedback_detail"  @click="detail = false">
			<div class="feedback_detail">
				<div class="detail_1">
					<p class="detail_title">反馈详情</p>
					<p class="detail_time">{{getDate(adviceDetail.createtime)}}</p>
					<span @click="detail = false">X</span>
				</div>
				<div class="detail_2">
					<p>{{adviceDetail.content}}</p>
					<p class="answer">官方回复：{{adviceDetail.remark}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'feedback',
	data:function(){
		return{
			type: 1, //1意见反馈 2反馈列表
			feedbackType: 1,//1意见反馈 2功能建议
			feedback: '',//反馈内容
			detail: false,//详情弹窗
			list:[],	// 我的反馈
			adviceDetail: {} // 反馈详情
		}
	},
	methods:{
		//--------提交反馈-----------
		advice: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				type: _this.feedbackType,
				content: _this.feedback
			});
			_this.$axios.post("/user/advice/addAdvice", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("提交成功，感谢您的反馈");
					_this.type = 2;
					_this.feedbackType = 1;
					_this.feedback = '';
					_this.getMyAdvice();
				}else{
					console.log(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------获取我的反馈-----------
		getMyAdvice: function(){
			var _this = this;
			_this.$axios.post("/user/advice/selectMyAdvice").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.list = data.result;
				}else{
					console.log(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		},
		//--------获取反馈详情-----------
		selectDetail: function(item){
			this.adviceDetail = item;
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
	},
	created: function(){
		this.getMyAdvice();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#feedback{
	min-height: 100%;
	padding-top: 4rem;
	box-sizing: border-box;
	background-color: #fff;
}
.feedback_type{
	border-top: 1rem solid #F5F5F5;
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	justify-content: space-around;
}
.feedback_type li{
	height: 3rem;
	line-height: 3rem;
	font-size: 1.2rem;
	color: #787878;
	border-bottom: 2px solid transparent;
}
.feedback_type li.type_active{
	color: #FF6565;
	border-bottom: 2px solid #FF6565;
}
.feedback_form{
	padding: 1rem;
	box-sizing: border-box;
}
.form_title{
	font-size: 1.2rem;
	color: #787878;
	margin-bottom: 1rem;
}
.feedback_form ul{
	display: flex;
	margin-bottom: 1rem;
}
.feedback_form ul li{
	width: 8rem;
	height: 2.6rem;
	border: 1px solid #EEEEEE;
	border-radius: 3px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4F4F4F;
	position: relative;
	margin-right: 1rem;
}
.feedback_form ul li.type_active{
	color: #FF6565;
	border: 1px solid #FF6565;
}
.feedback_form ul li img{
	position: absolute;
	bottom: 0;
	right: 0;
	height: 1.5rem;
	display: block;
}
.feedback_form textarea{
	width: 100%;
	height: 10rem;
	border: 1px solid #EEEEEE;
	padding: 1rem;
	border-radius: 3px;
	box-sizing: border-box;
}
.feedback_form #sub{
	width: 100%;
	height: 3rem;
	background-color: #FF6565;
	color: #FFFFFF;
	letter-spacing: 1rem;
	padding-left: 1rem;
	box-sizing: border-box;
	font-size: 1.2rem;
	border: none;
	border-radius: 3px;
	margin-top: 2rem;
}
.feedback_item{
	padding: 1rem;
	box-sizing: border-box;
	border-bottom: 1rem solid #F5F5F5;
	box-sizing: border-box;
}
.item_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.item_title p:first-child{
	color: #4F4F4F;
	font-size: 1.2rem;
}
.item_title p:first-child{
	color: #3BA5EA;
	font-size: 1.2rem;
}
.item_content{
	color: #787878;
	font-size: 1.2rem;
	line-height: 1.5em;
	margin: 0.5rem 0;
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item_time{
	display: flex;
	justify-content: flex-end;
	color: #A9A9A9;
	font-size: 1rem;
}
/*-------反馈详情弹窗----------*/
#feedback_detail{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
}
.feedback_detail{
	width: 90%;
	background-color: #fff;
	border-radius: 5px;
}
.detail_1{
	padding: 0.5rem 0;
	position: relative;
	border-bottom: 1px solid #EEEEEE;
}
.detail_1 .detail_title{
	color: #4F4F4F;
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 0.5rem;
}
.detail_1 .detail_time{
	color: #A9A9A9;
	font-size: 1rem;
	text-align: center;
}
.detail_1 span{
	color: #3BA5EA;
	font-size: 1.4rem;
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
}
.detail_2{
	padding: 1rem;
	box-sizing: border-box;
	min-height: 10rem;
	font-size: 1.2rem;
	color: #787878;
	line-height: 1.5em;
	position: relative;
}
.detail_2 .answer{
	color: #3BA5EA;
	margin-top: 1rem;
}
.detail_2 p{
	word-wrap: break-word;
}

</style>
